
import { mapSet } from '@/config'
import * as ol from '../openLayer'
import { createMarksStyle } from './style'
import { anchorOptionDefaultConfig } from './config'
import { deepAssign } from '@/utils/tools/deepAssign'

/**
 * OlMapPicker 地图拾取器 类，
 */
/**
 * marks 样式参考marksStyle 样式配置项
 */

export default class OlMapPicker {
  constructor (_map, _config) {
    this.map = _map
    this.options = deepAssign(anchorOptionDefaultConfig, _config) //  配置项
    this.pickerPointMark = null
    this.olPopupElement = null
    this.olPopupOverlay = null
    this.coordinatePointFeature =null
    this.mapSize = this.map.getSize() // 地图大小
    if (this.options.pickerConfig.show) { //  坐标点样式坐标设置
      this.initPickerMark(this.options.pickerConfig.currentCoordinate)
    }
    this.onMouseClick = this.handleMouseClick.bind(this)
    this.onMouseMove = this.handleMouseMove.bind(this)

    this.attachActionListener()
  }

  /**
   * 更新OlMapPicker，（待开发）
   */
  updateOlMapPicker (_map, _config) {
    this.map = _map
    this.options = deepAssign(anchorOptionDefaultConfig, _config) //  配置项
  }

  /**
   * 鼠标移动监听
   * @param {*} e
   */
  handleMouseMove (e) {
    // console.log('点击', this, this.coordinateTipLabel.edgeOffset[0])
    if (e.dragging) {
      return false
    }

    // if (!this.olPopupElement) {
    //   this.olPopupElement = document.createElement('div')
    //   this.olPopupElement.id = 'ol-Popup'
    //   this.olPopupElement.className = 'ol-popup'
    //   // document.body.appendChild(this.olPopupElement)
    // } else {
    //   if (!this.olPopupOverlay) {
    //     this.olPopupOverlay = new ol.Overlay({
    //       element: this.olPopupElement,
    //       offset: this.options.pickerTipLabelConfig.offset
    //     })
    //     this.map.addOverlay(this.olPopupOverlay)
    //   }
    //   this.olPopupElement.innerHTML = ` ${parseFloat(e.coordinate[0]).toFixed(6)},${parseFloat(e.coordinate[1]).toFixed(6)}`
    //   this.olPopupOverlay.setPosition(e.coordinate)
    // }
    e.preventDefault()
    e.stopPropagation()
    // console.log(e.originalEvent)
    let layerX = e.originalEvent.layerX
    let layerY = e.originalEvent.layerY
    let xBool = layerX < this.options.pickerTipLabelConfig.edgeOffset[0] || (this.mapSize[0] - layerX) < this.options.pickerTipLabelConfig.edgeOffset[0]
    let yBool = layerY < this.options.pickerTipLabelConfig.edgeOffset[1] || (this.mapSize[1] - layerY) < this.options.pickerTipLabelConfig.edgeOffset[1]
    if (xBool || yBool) { // 鼠标移除地图
      // console.log('要移出', this.olPopup, this.mCTargetOverlay, e.originalEvent.layerY)

      if (this.olPopupElement && this.olPopupOverlay) {
        this.map.removeOverlay(this.olPopupOverlay)
        this.olPopupOverlay = null
        this.olPopupElement = null
      }
    } else {
      if (!this.olPopupElement) {
        this.olPopupElement = document.createElement('div')
        this.olPopupElement.id = 'ol-Popup'
        this.olPopupElement.className = 'ol-popup'
      } else {
        if (!this.olPopupOverlay) {
          this.olPopupOverlay = new ol.Overlay({
            element: this.olPopupElement,
            offset: this.options.pickerTipLabelConfig.offset
          })
          this.map.addOverlay(this.olPopupOverlay)
        }
        this.olPopupElement.innerHTML = ` ${parseFloat(e.coordinate[0]).toFixed(6)},${parseFloat(e.coordinate[1]).toFixed(6)}`
        this.olPopupOverlay.setPosition(e.coordinate)
      }
    }
  }

  /**
   * 点击事件
   * @param {*} e
   */
  handleMouseClick (e) {
    if (e.dragging) {
      return
    }
    e.preventDefault()
    e.stopPropagation()
    let type = e.type; let realyType
    if (type === 'singleclick') {
      realyType = 'click'
    }
    this.options.actions.filter(item => item.type === realyType)[0].handle(e.coordinate)
    if (this.options.pickerConfig.show) {
      this.initPickerMark(e.coordinate)
    }
  }

  /**
   * 设置定位点样式
   * @param {*} point
   */
  initPickerMark (point) {
    if(this.options.pickerConfig.onlyOne){ // 只显示一个
      if(this.pickerPointMark){
        this.coordinatePointFeature.setGeometry(new ol.Point(point))
      }else{
        this.addPickerMark(point)
      }
     
    }else{
      this.addPickerMark(point)
    }
      // console.log(this.pickerPointMark)  
  }
/**
 * 新增pickMark
 */
  addPickerMark(point){
    this.coordinatePointFeature = new ol.Feature({
      geometry: new ol.Point(point)
    })
    this.coordinatePointFeature.setStyle(
      this.setSelectStyle()
    )
    const vectorSource = new ol.VectorSource({
      features: [this.coordinatePointFeature]
    })

    this.pickerPointMark = new ol.VectorLayer({
      source: vectorSource,
      properties: this.options.layerProperties
    })
    this.map.addLayer(this.pickerPointMark)
  }

  /**
   * 添加监听
   */
  attachActionListener () {
    this.map.getTargetElement().style.cursor = 'pointer'
    if (this.options.pickerTipLabelConfig.show) {
      this.map.on('pointermove', this.onMouseMove)
      // this.map.getViewport().addEventListener('mouseout', () => {
      //   // this.PopupElement.style.display = 'none'
      //   this.map.removeOverlay(this.olPopupOverlay)
      //   this.olPopupOverlay = null
      //   this.olPopupElement = null
      // })
    }
    if (this.options.actions.length > 0) {
      console.log(this.options)
      for (let action of this.options.actions) { //  绑定事件
        if (action.type === 'click') {
          this.map.on('singleclick', this.onMouseClick)
        }
      }
    }
  }

  /**
   * 设置marks 样式
   * @param {*} feature
   * @returns
   */
  setSelectStyle () {
    let markerStyle = createMarksStyle(this.options.layerStyle)
    return markerStyle
  }
}
